<template>
  <div>
    <div v-for="(data, index) in goods" :key="index" class="patient-card">
      <h2>患者信息</h2>
      <div class="description-row">
        <div class="description-item">
          <span class="label">名字:</span>
          <span class="value">{{ data.patientName }}</span>
        </div>
        <div class="description-item">
          <span class="label">性别:</span>
          <span class="value">{{ data.gender }}</span>
        </div>
      </div>
      <div class="description-row">
        <div class="description-item">
          <span class="label">体重:</span>
          <span class="value">{{ data.weight }} kg</span>
        </div>
        <div class="description-item">
          <span class="label">过敏史:</span>
          <span class="value">{{ data.allergyHistory }}</span>
        </div>
      </div>
      <div class="description-row">
        <div class="description-item">
          <span class="label">既往病史:</span>
          <span class="value">{{ data.pastMedicalHistory }}</span>
        </div>
        <div class="description-item">
          <span class="label">肝功能:</span>
          <span class="value">{{ data.liverFunction }}</span>
        </div>
      </div>
      <div class="description-row">
        <div class="description-item">
          <span class="label">肾功能:</span>
          <span class="value">{{ data.kidneyFunction }}</span>
        </div>
        <div class="description-item">
          <span class="label">怀孕情况:</span>
          <span class="value">{{ data.pregnancyStatus }}</span>
        </div>
      </div>
    </div>
    <button class="add-patient-btn" @click="addPatient">
      <i class="el-icon-plus"></i> 添加患者
    </button>
    <button class="submit-btn" style="margin-top: 20px; width: 100%" @click="submit1">提交</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import router from '../router';
import { useRoute } from 'vue-router';

const route = useRoute();
const goods = ref([]);

const addPatient = () => {
  router.push({path:'/add_patient',query:{id:route.query.id}});
};

onMounted(() => {
  if (route.query.data) {
    try {
      const data_x = JSON.parse(route.query.data);
      goods.value.push(data_x);
    } catch (error) {
      console.error('解析 JSON 失败:', error);
      ElMessage.error('解析患者信息失败，请检查数据格式');
    }
  }
});

const submit1 = () => {
  if (goods.value.length === 0) {
    ElMessage.error('请至少添加一个患者信息');
    return;
  }
  // 这里可以添加提交逻辑，例如发送数据到服务器
  ElMessage.success('患者信息已提交');
  router.push('/pay-ask-doctor');
};
</script>

<style scoped>
.patient-card {
  max-width: 800px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto 20px;
}

.patient-card h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.description-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.description-item {
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.value {
  flex: 1;
}

.add-patient-btn {
  display: block;
  margin: 20px auto;
  width: 200px;
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}

.submit-btn {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}
</style>
